<template>
    <div class="container-fluid">
        <div class="panel panel-info">
            <vxe-toolbar class="panel-heading">
                <template #buttons>
                    <div class="row">
                        <div class="col-1">
                            <vxe-button type="text" status="info" icon="fa fa-chevron-left"
                                        @click="$router.push('/sys/role?action=back')"
                                        content="列表" :loading="isLoading">
                            </vxe-button>
                        </div>
                        <div class="col-10" style="text-align: center;">
                            <label>角色权限设置（请勾选对应的菜单，然后点击保存即可）</label>
                        </div>
                    </div>
                </template>
            </vxe-toolbar>
            <div class="panel-body" style="padding: 0.125rem;">
                <vxe-form ref="xForm" :data="role" span="24" title-align="right" title-width="100" title-asterisk>
                    <vxe-form-item title="角色名" field="name">
                        <template #default="params">
                            <vxe-input class="input" v-model="role.name" placeholder="请输入角色名" prefix-icon="fa fa-user"
                                       clearable
                                       @input="$refs.xForm.updateStatus(params)" readonly></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="代码" field="code">
                        <template #default="params">
                            <vxe-input class="input" v-model="role.code" placeholder="请输入代码，供程序调用"
                                       prefix-icon="fa fa-user" clearable
                                       @input="$refs.xForm.updateStatus(params)" readonly></vxe-input>
                        </template>
                    </vxe-form-item>
                    <vxe-form-item title="描述" span="24" field="represent">
                        <template #default="params">
                            <vxe-textarea :autisize="{minRows:2,maxRows:10}" v-model="role.represent"
                                          placeholder="请输入描述"
                                          maxlength="100" show-word-count clearable
                                          @input="$refs.xForm.updateStatus(params)" readonly></vxe-textarea>
                        </template>
                    </vxe-form-item>
                </vxe-form>
                <vxe-table row-id="id" resizable show-overflow ref="xTree" border align="left" :loading="isLoading"
                           :tree-config="{children: 'children', iconOpen: 'fa fa-chevron-down', iconClose: 'fa fa-chevron-right'}"
                           :tooltip-config="{showAll: true, enterable: true}" :data="list" :export-config="{}"
                           :checkbox-config="{labelField: 'name', checkRowKeys: selectedData,checkStrictly:true,trigger: 'row'}">
                    <vxe-column type="checkbox" field="name" title="名称" tree-node width="200">
                        <template #default="{ row }">
                <span>
                  <template v-if="row.children && row.children.length">
                    <i class="tree-node-icon fa"
                       :class="$refs.xTree.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
                  </template>
                  <template v-else>
                    <i class="tree-node-icon fa fa-file-o"></i>
                  </template>
                  <span>{{ row.name }}</span>
                </span>
                        </template>
                    </vxe-column>
                    <vxe-column title="图标" field="icon">
                        <template #default="{row}">
                            <i :class="row.icon"></i>
                        </template>
                    </vxe-column>
                    <vxe-column field="module_name" title="模块名"></vxe-column>
                    <vxe-column field="action_name" title="控制器名"></vxe-column>
                    <vxe-column field="function_name" title="方法名"></vxe-column>
                    <vxe-column field="is_menu" title="是否菜单">
                        <template #default="{row}">
                            <template v-if="row.is_menu === 1">是</template>
                            <template v-else-if="row.is_menu  === 0">否</template>
                        </template>
                    </vxe-column>
                    <vxe-column field="sort" title="顺序"></vxe-column>
                    >
                </vxe-table>
            </div>
            <div class="panel-footer">
                <div class="row">
                    <div class="col-1">
                        <vxe-button type="text" status="danger" icon="fa fa-remove"
                                    @click="$router.push('/sys/role?action=back')" content="取消"
                                    :loading="isLoading">
                        </vxe-button>
                    </div>
                    <div class="row-10" style="text-align: center">
                        <vxe-button type="text" status="success" icon="fa fa-save" @click="submit()"
                                    :content="btnSubmitName"
                                    :loading="isLoading">
                        </vxe-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SysRolePermission',
    data () {
        return {
            list: [],
            role: {id: null, name: '', code: '', represent: ''},
            selectedData: [],
            isLoading: false,
            btnSubmitName: '保存'
        }
    }, created () {
        this.role.id = this.$route.params.id
        this.loadData()
    },
    methods: {
        loadData () {
            this.$request.get(this.$apiSys.roleSettingGetUrl, {id: this.role.id}, true).then(res => {
                console.log(res.data.menus)
                console.log(res.data.selectedData)
                if (res.status) {
                    this.list = res.data.menus
                    this.selectedData = res.data.selectedData
                    this.role = res.role
                    // 展开所有节点
                    this.$nextTick(() => {
                        this.$refs.xTree.setAllTreeExpand(true)
                    })
                } else {
                    this.$router.push('/sys/role?action=back')
                }
            })
        },
        submit () {
            let obj = this.$refs.xTree.getCheckboxRecords()
            let menuIds = []
            for (let i = 0; i < obj.length; i++) {
                menuIds.push(obj[i].id)
            }
            console.log(menuIds)
            this.isLoading = true
            this.btnSubmitName = '正在保存...'
            this.$request.post(this.$apiSys.roleSettingGetUrl, {
                id: this.role.id,
                menuIds: menuIds + ''
            }).then(res => {
                if (res.status) {
                    this.$XModal.message({
                        content: '保存成功',
                        status: 'success'
                    })
                    this.$router.push('/sys/role?action=back')//返回列表不需要刷新
                } else {
                    // this.$XModal.message({
                    //   content: res.msg,
                    //   status: 'error'
                    // })
                    this.isLoading = false
                    this.btnSubmitName = '保存'
                }
            }, err => {
                this.isLoading = false
                this.btnSubmitName = '保存'
            })
        }
    }
}
</script>

<style>

</style>
